<template>
  <van-nav-bar
    title="我的收藏"
    left-text="返回"
    left-arrow
    fixed
    @click-left="onBack"
  />
  <div style="height: 7vh"></div>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="item in list"
        :key="item.id"
        :num="item.nums"
        :price="item.total"
        :desc="'商品单价：' + item.product.price"
        :title="item.product.name"
        :thumb="item.product.thumbs_cdn"
        @click="()=>{proxy.$router.push({ path: '/product/product/info', query: { id: item.proid } })}"
      />
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
const { proxy } = getCurrentInstance();
const business = reactive(proxy.$cookies.get("business") ?? {});
const refreshing = ref(false);
const finished = ref(false);
const list = reactive([]);
const loading = ref(false);
const listCount = ref(0);
const page = ref(1);
const limit = ref(10);

const onRefresh = () => {
  page.value = 1;
  refreshing.value = true;
  list.length = 0;
  loading.value = true;
  onLoad();
};

const onLoad = () => {
  if (!refreshing.value && list.length < listCount.value) {
    page.value = page.value + 1;
  }

  if (refreshing.value) {
    setTimeout(() => {
      refreshing.value = false;
    }, 1500);
  }

  setTimeout(getCollectData, 1500);
};

const getCollectData = async () => {
  let data = {
    id: business.id,
    limit: limit.value,
    page: page.value,
  };
  let result = await proxy.$Api.collectdata(data);
  // console.log(result);
  if (!result && result.code === 0) {
    proxy.$showNotify({
      type: "error",
      message: result.msg,
      duration: 2000,
    });
    return;
  }
  proxy.$showNotify({
    type: "success",
    message: result.msg,
    duration: 2000,
  });
  list.push(...result.data.list);
  listCount.value = result.data.count;

  finished.value = false;
  loading.value = false;

  
  if (list.length === listCount.value) {
    finished.value = true;
    loading.value = false;
    return;
  }
};

// console.log(business.id);

const onBack = () => {
  proxy.$router.back();
};
</script>
